<template>
  <div>
    <div v-loading="loading" class="chat-box-header">
      <i
        class="el-icon-arrow-left"
        style="font-size: 28px; vertical-align: middle; cursor: pointer"
        @click="returnMC()"
      ></i>
      <el-avatar
        :size="50"
        :src="target.thumbnail_url"
        style="vertical-align: middle"
      ></el-avatar>
      <span @click="to_userprofile()" class="from-name">{{
        target.username
      }}</span>
    </div>
    <el-divider></el-divider>
    <div class="message-page-wrap">
      <div
        v-for="(item, index) in messList"
        :key="index"
        :class="item.sentFrom == 0 ? 'message-row-right' : 'message-row-left'"
      >
        <div class="time">{{ calcTime(index) }}</div>
        <div></div>
        <div v-if="item.sentFrom != 0" class="triangle1"></div>
        <span
          v-html="contentCalc(item.content) + '<br/>'"
          class="content"
        ></span>
        <div v-if="item.sentFrom == 0" class="triangle2"></div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="input">
      <i class="el-icon-s-promotion send-icon" @click="sendMessage()"></i>
      <div v-html="contentCalc(input) + '<br/>'"></div>
      <textarea type="text" v-model="input"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: "PrivateMessage",
  data() {
    return {
      isLogin: false,
      loading: true,
      fromId: "265a56ba48896e123f",
      from: "钟离",
      imgUrl:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHxG7WGeczxuJ5gospj2LrJK6Vow0CKGY1JA&usqp=CAU",
      input: "",
      target: {},
      messList: [
        {
          content: "",
          createdAt: "",
          id: "",
          seen: "",
          sentBy: "",
          sentFrom: "",
          updatedAt: "",
          userRequestScholar: "",
        },
        // { isMyself: true, content: "额 嘿", time: "2022-12-09 00:25" },
        // { isMyself: false, content: "额 哈喽", time: "2022-12-06 00:26" },
        // { isMyself: true, content: "额 嘿", time: "2022-12-06 00:26" },
        // { isMyself: true, content: "额 嘿", time: "2022-12-06 00:36" },
        // { isMyself: true, content: "刚刚宰", time: "2022-12-06 00:36" },
        // { isMyself: true, content: "那边砍-刀-你", time: "2022-12-06 01:38" },
        // { isMyself: false, content: "感觉~", time: "2022-12-06 11:05" },
        // { isMyself: false, content: "你", time: "2022-12-06 11:05" },
        // { isMyself: false, content: "闺蜜旁边的~你", time: "2022-12-09 10:25" },
        // { isMyself: false, content: "还", time: "2022-12-09 10:25" },
        // { isMyself: false, content: "蛮可爱的", time: "2022-12-09 12:25" },
      ],
    };
  },
  created() {
    this.getAll();
    setTimeout(() => {
      let container = this.$el.querySelector(".message-page-wrap");
      container.scrollTop = container.scrollHeight;
    }, 0);
  },
  methods: {
    to_userprofile() {
      // 跳转用户主页
      this.$router.push("/userprofile/" + this.target.userId);
    },
    calcTime(index) {
      var t1, t2;
      t1 = new Date(
        parseInt(new Date(this.messList[index].createdAt).getTime())
      );
      if (index == 0) {
        t2 = new Date(parseInt(new Date().getTime()));
      } else {
        t2 = new Date(
          parseInt(new Date(this.messList[index - 1].createdAt).getTime())
        );
        var time = parseInt((t1 - t2) / 1000);
        if (time < 60 * 5) return "";
      }
      let y = t1.getFullYear();
      let m =
        t1.getMonth() < 10 ? "0" + (t1.getMonth() + 1) : t1.getMonth() + 1;
      let d = t1.getDate() < 10 ? "0" + t1.getDate() : t1.getDate();
      let h = t1.getHours() < 10 ? "0" + t1.getHours() : t1.getHours();
      let mn = t1.getMinutes() < 10 ? "0" + t1.getMinutes() : t1.getMinutes();
      if (new Date().toDateString() === new Date(t1).toDateString()) {
        return h + ":" + mn;
      }
      return y + "-" + m + "-" + d + " " + h + ":" + mn;
    },
    sendMessage() {
      if (this.input == "") return;
      // 发送信息
      let formData = new FormData();
      formData.append("chatBoxId", this.$route.params.chatboxid);
      formData.append("content", this.input);
      this.$axios({
        method: "post",
        url: "/api/sendMessage",
        data: formData,
      })
        .then((res) => {
          console.log(res);
          let obj = {
            sentFrom: 0,
            content: this.input,
            createdAt: new Date(parseInt(new Date().getTime())),
          };
          this.messList.push(obj);
          this.input = "";
        })
        .catch((err) => {
          console.log(err.response.data.code);
          this.$message.error("网络请求失败");
          return;
        });
      setTimeout(() => {
        let container = this.$el.querySelector(".message-page-wrap");
        container.scrollTop = container.scrollHeight;
      }, 0);
    },
    returnMC() {
      this.$router.push("/usercenter/messagecenter");
    },
    contentCalc(s) {
      return s.replace(/(\r\n|\n|\r)/gm, "<br/>");
    },
    async getAll() {
      console.log(this.$route.params);
      await this.$axios.all([this.getMessage(), this.getUserDetail()]).then(
        this.$axios.spread((mesRes, userRes) => {
          this.messList = mesRes.data.data;
          this.target = userRes.data.data;
          this.target.thumbnail_url=sessionStorage.getItem('avator')
          this.target.userId = this.$route.params.targetid;
          console.log(this.messList);
          console.log(this.target);
        })
      );
      this.loading = false;
    },
    getUserDetail() {
      return this.$axios({
        method: "get",
        url: "/api/getUserPage?userId=" + this.$route.params.targetid,
      });
    },
    getMessage() {
      return this.$axios({
        method: "get",
        url: "/api/getChatBoxMessage?chatBoxId=" + this.$route.params.chatboxid,
      });
    },
  },
};
</script>
<style scoped>
.send-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;
}
textarea:focus {
  outline: none;
}
textarea {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  width: 95%;
  font-size: 16px;
  resize: none;
  border: none;
  letter-spacing: 1px;
  line-height: 18px;
  /* background-color: #502d6646; */
  background-color: transparent;
  border-radius: 5px;
  word-wrap: break-word;
  font-family: "Microsoft YaHei", Helvetica, serif;
  /* border-radius: 5px; */
}
.input > div {
  visibility: hidden;
  min-height: 38px;
  height: auto;
  width: 95%;
  padding: 15px;
  box-sizing: border-box;
  background-color: red;
  letter-spacing: 1px;
  line-height: 18px;
  font-size: 16px;
  word-wrap: break-word;
  font-family: "Microsoft YaHei", Helvetica, serif;
}
.input {
  position: relative;
  margin: 0 0 10px 0;
  background-color: #dedede46;
  /* outline: 1px blue solid; */
  /* background-color: transparent; */
}
.triangle1 {
  position: relative;
  display: inline-block;
  border-width: 5px;
  border-style: solid;
  border-color: transparent white transparent transparent;
}
.triangle2 {
  display: inline-block;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #b5c2ff;
}

.content {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px 0;
  border-radius: 5px;
  background-color: burlywood;
  box-shadow: #dedede 0px 0px 20px;
}
.message-row-right .content {
  white-space: pre-line;
  background-color: #b5c2ff;
  box-shadow: #dedede 2px 5px 10px;
}
.message-row-left .content {
  background-color: white;
  box-shadow: #dedede -2px 5px 10px;
}
.message-row-right {
  text-align: end;
  /* outline: 1px solid red; */
}
.message-page-wrap {
  height: 300px;
  padding: 10px 0;
  overflow: scroll;
  /* outline: 1px solid red; */
}
.el-divider {
  margin: 15px 0;
}
.from-name {
  margin: 0 15px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}
.time {
  /* display: inline-block; */
  /* width: 100px; */
  color: #aaaaaa;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
}
.name-title-wrap {
  display: inline-block;
  width: 680px;
  margin: 0 0 0 20px;
  vertical-align: middle;
  /* outline: 1px red solid; */
}
.el-avatar {
  vertical-align: middle;
  /* outline: 1px red solid; */
}
.avatar-badge {
  width: 70px;
  /* outline: 1px red solid; */
}
.noti-wrap:hover {
  background-color: #f5f7fa;
  cursor: pointer;
}
.noti-wrap {
  /* margin: 0 0 30px 0; */
  padding: 15px 10px;
}
</style>